<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理系统</title>
    <link rel="stylesheet" th:href="@{/css/layui.css}">
    <style>
        .layui-form-label{
            width: 100px;
        }
    </style>
</head>
<body class="layui-layout-body">
<button class="layui-btn" onclick="$('.add').show()">添加</button>
<div class="add" style="display: none">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">是否接种第一针</label>
            <div class="layui-input-inline">
                <select name="statusOne" lay-verify="required">
                    <option value="1" selected>是</option>
                    <option value="2">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">第一针厂家</label>
            <div class="layui-input-inline">
                <input type="text" name="brandOne"  placeholder="第一针厂家" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">第一针接种时间</label>
            <div class="layui-input-inline">
                <input name="inoculationTimeStrOne" type="text" class="layui-input" id="test1">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否接种第二针</label>
            <div class="layui-input-inline">
                <select name="statusTwo" lay-verify="required">
                    <option value="1" selected>是</option>
                    <option value="2">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">第二针厂家</label>
            <div class="layui-input-inline">
                <input type="text" name="brandTwo"  placeholder="第二针厂家" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">第二针接种时间</label>
            <div class="layui-input-inline">
                <input name="inoculationTimeStrTwo" type="text" class="layui-input" id="test2">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否接种第三针</label>
            <div class="layui-input-inline">
                <select name="statusThree" lay-verify="required">
                    <option value="1" selected>是</option>
                    <option value="2">否</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">第三针厂家</label>
            <div class="layui-input-inline">
                <input type="text" name="brandThree"  placeholder="第三针厂家" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">第三针接种时间</label>
            <div class="layui-input-inline">
                <input name="inoculationTimeStrThree" type="text" class="layui-input" id="test3">
            </div>
        </div>
        <div class="layui-form-item" th:if="${isAdmin}">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username"  placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="$('.add').hide()">取消</button>
            </div>
        </div>
    </form>
</div>
<table class="layui-hide" id="adminList" lay-filter="taskTable">

</table>
<script th:src="@{layui.js}"></script>
<script th:src="@{js/jquery-3.3.1.js}"></script>

<script type="text/javascript">
    layui.use(['table'], function(){
        var table = layui.table;//使用数据表格

        tableIns = table.render({
            elem: '#adminList',//选择html中对应的数据表格ID
            url:'listInoculations',//分页提交到spring boot 代码的映射名称
            method:'POST',
            limit:8,//每页显示的记录数量
            limits:[5,8,10,15,20],//可选择每页显示的数量
            page: true,//开启分页

            cols: [
                [
                    {field:'id',title:'ID', width: 50},
                    {field:'username',title:'姓名'},
                    {field:'userIdentity',title:'身份证'},
                    {field:'status',title:'第一针是否接种',
                        templet: function(data){
                            if(data.statusOne==1){
                                return 	"<span>是</span>";
                            }else if(data.statusOne==2){
                                return "<span>否</span>";
                            }
                        }
                    },
                    {field:'brandOne',title:'第一针厂家'},
                    {field:'inoculationTimeStrOne',title:'第一针时间'},
                    {field:'statusTwo',title:'第二针是否接种',
                        templet: function(data){
                            if(data.statusTwo==1){
                                return 	"<span>是</span>";
                            }else if(data.statusTwo==2){
                                return "<span>否</span>";
                            }
                        }
                    },
                    {field:'brandTwo',title:'第二针厂家'},
                    {field:'inoculationTimeStrTwo',title:'第二针时间'},
                    {field:'status',title:'第三针是否接种',
                        templet: function(data){
                            if(data.statusThree==1){
                                return 	"<span>是</span>";
                            }else if(data.statusThree==2){
                                return "<span>否</span>";
                            }
                        }
                    },
                    {field:'brandThree',title:'第三针厂家'},
                    {field:'inoculationTimeStrThree',title:'第三针时间'},
                    {fixed: 'right',title:'操作',width:150,
                       templet: function(data){
                            return "<a class=\"layui-btn layui-btn-xs\" lay-event=\"edit\">编辑</a>"+
                                "<a class=\"layui-btn layui-btn-danger layui-btn-xs\" lay-event=\"del\">删除</a>";
                     }
                   }
                ]
            ],
            done:function(res, curr, count){
                console.log("表格渲染完成：");
            }

        });

        table.on('tool(taskTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    $.ajax({
                        url:'/delInoculation',
                        type:'get',
                        async:false,
                        data: {id: data.id},
                        dataType:'json',
                        success:function (data) {
                            layer.msg(data.msg)
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    ,title: '编辑'
                    ,content: 'toEditInoculation'
                    ,maxmin: true
                    ,area: ['470px', '650px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        let body = layer.getChildFrame('body', index);  // body.html() body里面的内容

                        let request = {}
                        request.statusOne = body.find("#statusOne").val()
                        request.statusTwo = body.find("#statusTwo").val()
                        request.statusThree = body.find("#statusThree").val()
                        request.brandOne = body.find("#brandOne").val()
                        request.brandTwo = body.find("#brandTwo").val()
                        request.brandThree = body.find("#brandThree").val()
                        request.inoculationTimeStrOne = body.find("#test1").val()
                        request.inoculationTimeStrTwo = body.find("#test2").val()
                        request.inoculationTimeStrThree = body.find("#test3").val()
                        request.id = body.find("#id").val()
                        $.ajax({
                            url:'/updateInoculation',
                            type:'post',
                            async:true,
                            data: request,
                            contentType:'application/x-www-form-urlencoded',
                            success:function (data) {
                                layer.msg(data.msg)
                                if (data.status == 200) {
                                    window.parent.location.reload()
                                }
                            }
                        });

                    }
                    ,success: function(layero, index){
                        let body = layer.getChildFrame('body', index);  // body.html() body里面的内容
                        body.find("#statusOne").val(data.statusOne)
                        body.find("#statusTwo").val(data.statusTwo)
                        body.find("#statusThree").val(data.statusThree)
                        body.find("#brandOne").val(data.brandOne)
                        body.find("#brandTwo").val(data.brandTwo)
                        body.find("#brandThree").val(data.brandThree)
                        body.find("#test1").val(data.inoculationTimeStrOne)
                        body.find("#test2").val(data.inoculationTimeStrTwo)
                        body.find("#test3").val(data.inoculationTimeStrThree)
                        body.find("#id").val(data.id)
                    }
                })
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1'
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });

        laydate.render({
            elem: '#test2'
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });

        laydate.render({
            elem: '#test3'
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });
    });

    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){

            console.log(data.field)
            let request = data.field
            $.ajax({
                url:'/saveInoculation',
                type:'post',
                async:true,
                data: request,
                contentType:'application/x-www-form-urlencoded',
                success:function (data) {
                    layer.msg(data.msg)
                    if (data.status == 200) {
                        window.parent.location.reload()
                    }
                }
            });

            // layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

</script>
</body>